<template>
    <div class="app-container">
        <!-- 使用 el-row 组件定义一个行布局，gutter 属性用于设置列之间的间距 -->
        <el-row :gutter="10" class="mb8">
            <!-- 定义列的宽度比为1.5，el-button 组件表示按钮组件 -->
            <el-col :span="1.5">
                <!-- 定义一个样式为 primary 的按钮，带有 Upload 图标，按钮文本为导入 -->
                <el-button type="primary" plain icon="Upload" @click="handleImport"
                    v-hasPermi="['product:category:import']">导入</el-button>
            </el-col>
            <!-- 定义另一个按钮，与上一个类似，只是样式为 warning，带有 Download 图标，按钮文本为导出 -->
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['product:category:export']">导出</el-button>
            </el-col>
            <!-- 插入一个名为 right-toolbar 的自定义组件或者插槽 -->
            <right-toolbar @queryTable="getList(0)"> </right-toolbar>
        </el-row>

        <!-- 使用 el-table 组件展示表格数据，v-loading 属性用于加载中的状态 -->
        <el-table v-loading="loading" :data="categoryList" style="width: 100%" row-key="id" border lazy
            :load="fetchData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <!-- 定义表格列，显示分类名称，prop 属性指向数据对象中的 name 属性 -->
            <el-table-column prop="name" label="分类名称" />
            <!-- 定义图标列，使用作用域插槽 #default 可以访问每一行的数据 -->
            <el-table-column prop="imageUrl" label="图标" #default="scope">
                <!-- 用 img 标签显示每行的图标图片，scope.row.imageUrl 指向当前行的 imageUrl -->
                <img :src="scope.row.imageUrl" width="50" />
            </el-table-column>
            <!-- 排序列，直接显示 orderNum 的值 -->
            <el-table-column prop="orderNum" label="排序" />
            <!-- 状态列，根据 status 的值显示不同的文本 -->
            <el-table-column prop="status" label="状态" #default="scope">
                <!-- 通过简单的条件操作符进行判断，如果 status 等于1则显示“正常”，否则显示“停用” -->
                {{ scope.row.status == 1 ? '正常' : '停用' }}
            </el-table-column>
            <!-- 创建时间列，直接显示 createTime 的值 -->
            <el-table-column prop="createTime" label="创建时间" />
        </el-table>

        <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
            <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                    <div class="el-upload__tip text-center">
                        <div class="el-upload__tip">
                            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                        </div>
                        <span>仅允许导入xls、xlsx格式文件。</span>
                        <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                            @click="importTemplate">下载模板</el-link>
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup name="Category">
import { getTreeSelect } from "@/api/product/category";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();
/** ************************************************************const********************************************************************* */
/*** 分类导入参数 */
const upload = reactive({
    // 是否显示弹出层（用户导入）
    open: false,
    // 弹出层标题（用户导入）
    title: "导入分类数据",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + "/product/category/import"
});
// categoryList 定义为响应式变量，用于存储分类列表的数据
const categoryList = ref([]);
// loading 定义为响应式变量，用于表示加载状态
const loading = ref(true);
// data 定义为响应式变量，用于存储查询参数
const data = reactive({
    queryParams: {
    }
});

const { queryParams } = toRefs(data);
/** ************************************************************function********************************************************************* */
// 导入操作按钮
function handleImport() {
    upload.title = "用户导入";
    upload.open = true;
}
/** 导出按钮操作 */
function handleExport() {
    proxy.download('product/category/export', {
        ...queryParams.value
    }, `category_${new Date().getTime()}.xlsx`)
}
/** 下载模板操作 */
function importTemplate() {
    proxy.download("product/category/importTemplate", {
    }, `category_template_${new Date().getTime()}.xlsx`);
};
// 文件上传中处理
function handleFileUploadProgress(event, file, fileList) {
    upload.isUploading = true;
}
// 文件上传成功处理
const handleFileSuccess = (response, file, fileList) => {
    upload.open = false;
    upload.isUploading = false;
    proxy.$refs["uploadRef"].handleRemove(file);
    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
    getList(0);
};
// 提交上传文件
function submitFileForm() {
    proxy.$refs["uploadRef"].submit();
}
// 定义 fetchData 函数，用于懒加载获取下一级分类列表
// 在使用支持异步加载子节点的树形组件时，resolve 参数的传递是为了允许你在数据加载完成后通知树形组件数据已经准备好
const fetchData = async (row, resolve) => {
    // 发送请求获取下一级分类数据，根据行的数据 row.id 发送请求
    const { code, data, message } = await getTreeSelect(row.id)
    // 通过 resolve 方法返回加载的数据
    // resolve 函数用于异步加载子节点的数据 当需要动态加载树形结构的子节点时，可以通过调用 resolve 函数来告知树形组件加载完成的数据
    resolve(data)
}
// 定义 getList 函数，用于获取商品分类列表
function getList(id) {
    // 在请求数据前设置加载状态为 true
    loading.value = true
    // 调用 getTreeSelect 函数获取分类列表数据
    getTreeSelect(id).then(response => {
        // 将返回的数据赋给 categoryList
        categoryList.value = response.data
        // 数据加载完成后，将加载状态设置为 false
        loading.value = false
    })
}
// 页面进入时调用 getList 函数初始化分类列表，id 为 0 表示获取所有的父分类
getList(0) // id 初始为0表示获取所有父分类
</script>